获取iframe中元素，提示跨域访问出错

cxxjackie

lucas 发表于 2022-8-10 08:04
感谢大佬指点，作为一个小白，太感谢了，确实解决了我的困扰，之前悬赏的20元，看怎么给方便点，请大佬喝 ...

不用不用，我都不知道有悬赏这回事。

lucas

cxxjackie 发表于 2022-8-9 18:06
iframe内部可以理解为另一个网页，如果网页跨域，那无论如何也是不能直接操作其中的元素的。跨域页面可以通 ...

记录一下对这个的理解，还有最后那行return _load.call(this, pdfDocument);没看懂，大佬能再讲下吗？this是指向哪里？pdfDocument是原来函数有的一个属性，哪里来的值传进去的

1. // iframe内有一个全局对象PDFViewerApplication，可对其进行劫持来判断pdf加载完毕，也可以用其他方法。
   
2.     // 1-保存原有函数
   
3.     var _load = window.PDFViewerApplication.load;
   
4.     // 2-改写原有函数
   
5.     window.PDFViewerApplication.load = function(pdfDocument) {
   
6.       // 3-在改写后的函数中执行原有函数的逻辑
   
7.       // 获取页码数，发送给主页面
   
8.       window.top.postMessage({
   
9.         numPages: pdfDocument._pdfInfo.numPages
   
10.       }, 'https://ctbpsp.com');
    
11.       // 4-采用 call 方法劫持，将函数的调用者改为this
    
12.       return _load.call(this, pdfDocument);

复制代码

cxxjackie

lucas 发表于 2022-8-11 12:57
记录一下对这个的理解，还有最后那行return _load.call(this, pdfDocument);没看懂，大佬能再讲下吗？thi ...

这句就是调用原函数的意思，this指向PDFViewerApplication，因为load是PDFViewerApplication的一个属性，正常调用PDFViewerApplication.load()的话，函数内的this会指向其所属的对象，而我们保存了_load以后，直接调用_load()的话this会指向window（因为_load不是PDFViewerApplication的属性），这显然是不对的，所以需要人为改变this的指向。下面的例子可以帮助你理解这一点：

1. const obj = {
   
2.     a: 123,
   
3.     b: function(n) {
   
4.         console.log(this.a + n);
   
5.     }
   
6. };
   
7. const fn1 = obj.b;
   
8. const fn2 = obj.b.bind(obj);
   
9. fn1(321); // NaN
   
10. fn2(321); // 444

复制代码

pdfDocument参数来自load函数的调用者，网页内部在加载pdf时会自己调用这个load并传参，这个劫持就是在中间把他拦下来，读取我们需要的参数后再原样调用原函数。那句call不仅改变了this指向，也包含了把参数传递回去的操作，如果将其拆分成2步来写，就是这个意思：

1. const __load = _load.bind(this);
   
2. return __load(pdfDocument);

复制代码

ozon

发现一个有用的帖子，记在小本本里