iT邦幫忙

0

請問如何使用javascript選取沒有id跟class的iframe #document中的<body>

請問如何使用javascript選取沒有id跟class的iframe #document中的新增click事件?

程式原始碼如下:

<iframe title="Editable area. Press F10 for toolbar." frameborder="0" class="k-content" tabindex="0" src="javascript:&quot;&quot;">
#document
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>html,body{padding:0;margin:0;height:100%;min-height:100%;}body{box-sizing:border-box;font-size:12px;font-family:Verdana,Geneva,sans-serif;margin-top:-1px;padding:5px .4em 0;word-wrap: break-word;-webkit-nbsp-mode: space;-webkit-line-break: after-white-space;}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em}h3{font-size:1.16em}h4{font-size:1em}h5{font-size:.83em}h6{font-size:.7em}p{margin:0 0 1em;}.k-marker{display:none;}.k-paste-container,.Apple-style-span{;left:-10000px;width:1px;height:1px;overflow:hidden}ul,ol{padding-left:2.5em}span{-ms-high-contrast-adjust:none;}a{color:#00a}code{font-size:1.23em}telerik\3Ascript{display: none;}.k-table{width:100%;border-spacing:0;margin: 0 0 1em;}.k-table td{min-width:1px;padding:.2em .3em;}.k-table,.k-table td{outline:0;border: 1px dotted #ccc;}.k-table p{margin:0;padding:0;}.k-column-resize-handle-wrapper {; height: 10px; width:10px; cursor: col-resize; z-index: 2;}.k-column-resize-handle {width: 100%; height: 100%;}.k-column-resize-handle > .k-column-resize-marker {width:2px; height:100%; margin:0 auto; background-color:#00b0ff; display:none; opacity:0.8;}.k-row-resize-handle-wrapper {; cursor: row-resize; z-index:2; width: 10px; height: 10px;}.k-row-resize-handle {display: table; width: 100%; height: 100%;}.k-row-resize-marker-wrapper{display: table-cell; height:100%; width:100%; margin:0; padding:0; vertical-align: middle;}.k-row-resize-marker{margin: 0; padding:0; width:100%; height:2px; background-color: #00b0ff; opacity:0.8; display:none;}.k-table-resize-handle-wrapper {; background-color: #fff; border: 1px solid #000; z-index: 100; width: 5px; height: 5px;}.k-table-resize-handle {width: 100%; height: 100%;}.k-table-resize-handle.k-resize-east{cursor:e-resize;}.k-table-resize-handle.k-resize-north{cursor:n-resize;}.k-table-resize-handle.k-resize-northeast{cursor:ne-resize;}.k-table-resize-handle.k-resize-northwest{cursor:nw-resize;}.k-table-resize-handle.k-resize-south{cursor:s-resize;}.k-table-resize-handle.k-resize-southeast{cursor:se-resize;}.k-table-resize-handle.k-resize-southwest{cursor:sw-resize;}.k-table-resize-handle.k-resize-west{cursor:w-resize;}.k-table.k-table-resizing{opacity:0.6;}k\:script{display:none;}
</style>
<script>
(function(d,c){d[c]('header'),d[c]('article'),d[c]('nav'),d[c]('section'),d[c]('footer');})(document, 'createElement');
</script>
<link rel="stylesheet" href="../../Content/master.css">
<link rel="stylesheet" href="../../Content/Editor.css">
</head>
<body autocorrect="off" contenteditable="true">
</body>
</html>
</iframe>

以下是我沒有成功的選取程式碼:

  $("iframe[title|='Editable area. Press F10 for toolbar.']").find("body").click(function(){
        alert("123");
    });

請問各位大大如何選取新增click事件,謝謝各位大大!

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 9 級 ‧ 2019-09-24 14:15:23 檢舉
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('123'); });
});

參考:
https://stackoverflow.com/questions/15080222/add-click-event-to-iframe
咖冰拉 iT邦新手 4 級 ‧ 2019-09-24 14:18:32 檢舉
除非iframe是在同網域
不然不行 控制
看語法有看到
"#document" 你的src應該是別的網域 這樣就不能document了
ccutmis iT邦高手 9 級 ‧ 2019-09-24 14:20:47 檢舉
樓上是對的
阿薛 iT邦新手 5 級 ‧ 2019-09-24 15:23:50 檢舉
ccutmis 目前您的解法還是沒辦法取得iframe 請問有其他種作法嗎?
ccutmis iT邦高手 9 級 ‧ 2019-09-24 15:37:34 檢舉
樓樓上已經說了為何不行的原因,你想做什麼可以描述一下嗎?
阿薛 iT邦新手 5 級 ‧ 2019-09-24 16:33:05 檢舉
想要控制body 還是要朝向修改專案引用的js檔案的方向?
阿薛 iT邦新手 5 級 ‧ 2019-09-24 17:31:33 檢舉
它應該不是不同網域 因為它的src就跟上面我留的原始碼一樣是空的 這樣算不同網域嗎? 所以children或childnodes之類的都不行?(我有嘗試過這兩個,但是無效並出現錯誤)
ccutmis iT邦高手 9 級 ‧ 2019-09-24 20:13:37 檢舉
看來我幫不上忙 抱歉. _ .
試試看這樣呢
$('iframe').on('load', function(){
$(this).contents().find("body").on('click', function() {
alert('123');
});
});
咖冰拉 iT邦新手 4 級 ‧ 2019-09-26 11:37:09 檢舉
請問....
src 是 javascript:&quot;&quot;
為什麼iframe裡面會有資料??
一般用本機測試 沒碰到類似問題

1 個回答

0
舜~
iT邦研究生 2 級 ‧ 2019-09-25 09:12:14

如果是在您本機的話,先處理這個
開發前端時,如何關閉 Chrome 跨域的安全策略

然後再照著留言的方法試試看~~

我要發表回答

立即登入回答